<template>
	<view class="container">
		<quick-button></quick-button>
		<view class="top-container">
			<uni-nav-bar :border="false" title="慢病管控" color="white" backgroundColor="transparent" :statusBar="true"
				left-icon="location" left-text="雁塔区"></uni-nav-bar>
			<view class="search-container-view">
				<view class="search-view">
					<image src="../../static/home_nav_search.png" class="icon"></image>
					<input disabled placeholder="输入" />
					<view class="search-text">搜索</view>
				</view>
			</view>
			<view>
				<uni-swiper-dot field="content" mode="round" :current="current" :info="topAreaGridList" :dots-styles="{
					bottom: 0,
					backgroundColor: '#EFEFEF',
					selectedBackgroundColor: '#0BC5AE',
					border: 'none',
					selectedBorder: 'none',
				}">
					<swiper style="height: calc(155rpx * 2 + 20rpx)">
						<swiper-item>
							<view class="top-grid-view-wrap">
								<view class="top-grid-view">
									<view class="grid-card-item-inner" v-for="(item, index) in disease" :key="index" @click="handleImageClick1(item)">
										<view class="grid-card-item">
											<view class="title">{{ item }}</view>
											<view class="content">描述</view>
										</view>
									</view>				
								</view>
							</view>
						</swiper-item>

					</swiper>

				</uni-swiper-dot>
			</view>
		</view>
		<view class="top-tab-view">
			<image class="tab-img" src="../../static/home_card_tab1.png" @click="handleImageClick1"></image>
			<image class="tab-img2" src="../../static/home_card_tab2.png" @click="handleImageClick2"></image>
		</view>
		
		 <TabBar :tabbarValue="tabbarValue" @onTabBarChange="onTabbarChange"></TabBar>
	</view>
</template>

<script>
	import TabBar from "../tabs/tabs.vue";
	import {
		   getDiseaseList} from '../../api/index.js'
	export default {
		components: {
		  TabBar,
		},
		data() {
			return {
				typeList: [],
				itemList: [],
				disease: [],
				current: 0,
			};
		},
		onShow() {},
		mounted() {
			this.initServe()
		},
		computed: {

		},
		methods: {
			initServe() {
				getDiseaseList().then((res) => {
					let data = res.data
					console.log("疾病数据",data )
					this.disease = data
				})
			
			},
			handleImageClick1(item) {
				const departmentName = item
				uni.navigateTo({
					url: "/chronicDisease/pages/online/onlineconsultation"+ departmentName // 目标页面的路径
				});
			},

		},
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.container {
		.top-container {
			width: 100%;
			padding-bottom: 20rpx;
			background: linear-gradient(to bottom, #0bc5ae, #f9f9f9);

			.top-grid-view-wrap {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.top-grid-view {
				width: calc(100% - 20rpx);
				box-sizing: border-box;
				display: grid;
				grid-template-columns: repeat(auto-fit, calc(100% / 3));

				.grid-card-item {
					width: 100%;
					min-height: 144rpx;
					border-radius: 12rpx;
					background: linear-gradient(to bottom, #e3fffc, #f4fffe);
					display: flex;
					flex-direction: column;
					padding: 10rpx;
					box-sizing: border-box;

					.title {
						font-size: 15.56px;
						color: rgba(35, 35, 35, 1);
						font-weight: bold;
					}

					.content {
						font-size: 13.25px;
						color: rgba(35, 35, 35, 0.5);
						margin-top: 10rpx;
						line-height: 35rpx;
						letter-spacing: 1px;
					}
				}

				.grid-card-item-inner {
					padding: 6rpx;
					box-sizing: border-box;
				}
			}
		}
	}

	.search-container-view {
		width: 100%;
		padding: 10rpx 20rpx;
		box-sizing: border-box;

		.search-view {
			width: 100%;
			height: 64rpx;
			background: white;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;

			.icon {
				width: 40rpx;
				height: 40rpx;
			}

			input {
				height: 100%;
				flex: 1;
				font-size: 26rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}

			.search-text {
				font-size: 30rpx;
				color: #0bc5ae;
			}
		}
	}

	.top-tab-view {
		width: 100%;
		display: flex;
		padding: 0 20rpx;
		box-sizing: border-box;

		.tab-img {
			width: 100%;
			height: 160rpx;
		}

		.tab-img2 {
			width: 100%;
			height: 160rpx;
			margin-left: 10rpx;
		}
	}

	.swiper-view {
		height: 180rpx;
		padding: 0 20rpx;
		margin-top: 20rpx;

		.swiper-img {
			width: 100%;
			height: 180rpx;
		}
	}



	::v-deep.uni-nav-bar-text {
		font-size: 17px;
	}
</style>